<div class="dashboard-page">
  <div class="container-fluid main">

    <div class="row">
      <div class="col-sm-9">
        <h2>{{'DASHBOARD_TITLE' | translate}}</h2>
      </div>
      <div class="col-sm-3 secondary">
        <!-- <h4>{{ 'DASHBOARD_NEWS_TITLE' | translate }}</h4> -->
      </div>
    </div>

    <div class="row">
      <div class="col-lg-8 col-md-9">
        <div class="row">
          <div class="col-lg-12">
            <div class="panel-heading">
              <ul class="nav nav-tabs">
                <li ng-class="$ctrl.tabConfirmed ? 'active' : ''">
                  <a ng-click="$ctrl.tabConfirmed = true;$ctrl.currentPageUnc = 0">{{ 'DASHBOARD_CONFIRMED' | translate }}</a>
                </li>
                <li ng-class="$ctrl.tabConfirmed ? '' : 'active'">
                  <a ng-click="$ctrl.tabConfirmed = false;$ctrl.currentPage = 0">{{ 'DASHBOARD_UNCONFIRMED' | translate }}
                    <span class="badge">{{$ctrl._DataBridge.unconfirmed.length}}</span>
                  </a>
                </li>
              </ul>
              <ul class="nav nav-tabs arrows">
                <li ng-show="$ctrl._DataBridge.transactions.length > 5 && $ctrl.tabConfirmed">
                  <button class="buttonStyle" ng-disabled="$ctrl.currentPage == 0" ng-click="$ctrl.currentPage = $ctrl.currentPage-1">
                    <span class="fa fa-chevron-left" aria-hidden="true"></span>
                  </button>
                  <b>{{$ctrl.currentPage+1}}/{{$ctrl.numberOfPages()}}</b>
                  <button class="buttonStyle" ng-disabled="$ctrl.currentPage+1 >= $ctrl.numberOfPages()" ng-click="$ctrl.currentPage = $ctrl.currentPage+1">
                    <span class="fa fa-chevron-right" aria-hidden="true"></span>
                  </button>
                </li>
                <li ng-show="$ctrl._DataBridge.unconfirmed.length > 5 && !$ctrl.tabConfirmed">
                  <button class="buttonStyle" ng-disabled="$ctrl.currentPageUnc == 0" ng-click="$ctrl.currentPageUnc = $ctrl.currentPageUnc-1">
                    <span class="fa fa-chevron-left" aria-hidden="true"></span>
                  </button>
                  <b>{{$ctrl.currentPageUnc+1}}/{{$ctrl.numberOfPagesUnc()}}</b>
                  <button class="buttonStyle" ng-disabled="$ctrl.currentPageUnc+1 >= $ctrl.numberOfPagesUnc()" ng-click="$ctrl.currentPageUnc = $ctrl.currentPageUnc+1">
                    <span class="fa fa-chevron-right" aria-hidden="true"></span>
                  </button>
                </li>
              </ul>
            </div>
            <table class="table table-condensed top">
              <thead>
                <tr>
                  <th>{{ 'GENERAL_ACCOUNT' | translate }}</th>
                  <th>{{ 'GENERAL_AMOUNT' | translate }}</th>
                  <th>{{ 'GENERAL_MESSAGE' | translate }}</th>
                  <th>{{ 'GENERAL_DATE' | translate }}</th>
                </tr>
              </thead>
            </table>
            <table class="table">
              <tbody>
                <div ng-show="$ctrl.tabConfirmed">
                  <div ng-repeat="tx in $ctrl._DataBridge.transactions | orderBy:'-transaction.timeStamp' | startFromUnc:$ctrl.currentPage*$ctrl.pageSize | limitTo:$ctrl.pageSize">
                    <tag-transaction d="tx" z="$ctrl._Wallet.currentAccount.address" h="$ctrl._DataBridge" tooltip-position="'left'"></tag-transaction>
                  </div>
                </div>
                <div ng-show="!$ctrl.tabConfirmed">
                  <div ng-repeat="tx in $ctrl._DataBridge.unconfirmed | orderBy:'-transaction.timeStamp' | startFrom:$ctrl.currentPageUnc*$ctrl.pageSizeUnc | limitTo:$ctrl.pageSizeUnc">
                    <tag-transaction d="tx" z="$ctrl._Wallet.currentAccount.address" h="$ctrl._DataBridge" tooltip-position="'left'" account-data="$ctrl._DataBridge.accountData"></tag-transaction>
                  </div>
                </div>
              </tbody>
            </table>
            <div class="panel-body nothing" ng-show="$ctrl._DataBridge.transactions.length == 0 && $ctrl.tabConfirmed">
              <p>{{ 'GENERAL_NO_RESULTS' | translate }}</p>
            </div>
            <div class="panel-body nothing" ng-show="$ctrl._DataBridge.unconfirmed.length == 0 && !$ctrl.tabConfirmed">
              <p>{{ 'GENERAL_NO_RESULTS' | translate }}</p>
            </div>
          </div>
          <!-- HARVESTED INCOME -->
          <div class="col-xs-12 col-lg-9">
            <div class="panel-heading">
              <h4> {{ 'DASHBOARD_HARVEST_INCOME_TITLE' | translate }} </h4>
            </div>
            <div class="panel-body" ng-show="$ctrl._DataBridge.harvestedBlocks.length && !$ctrl.chartEmpty">
              <canvas width='793' height='200' id="bar" class="chart chart-bar" chart-data="$ctrl.valuesInFee" chart-labels="$ctrl.labels"></canvas>
              <center><small>{{ 'DASHBOARD_HARVEST_INCOME_NOTE' | translate }}</small></center>
            </div>
            <div class="panel-body nothing" ng-show="!$ctrl._DataBridge.harvestedBlocks.length">
              <p>{{ 'GENERAL_NO_RESULTS' | translate }}</p>
            </div>
            <div class="panel-body" ng-show="$ctrl.chartEmpty && $ctrl._DataBridge.harvestedBlocks.length">
              <p>{{ 'DASHBOARD_HARVEST_INCOME_MESSAGE' | translate }}</p>
            </div>
          </div>
          <!-- HARVESTED BLOCKS -->
          <div class="col-xs-12 col-lg-3 harvestedBlocks">
            <div class="panel-heading">
              <h4>{{ 'DASHBOARD_HARVESTED_BLOCKS_TITLE' | translate }}</h4>
            </div>
            <table class="table table-condensed">
              <thead>
                <tr>
                  <th>{{ 'GENERAL_BLOCK' | translate }}</th>
                  <th>{{ 'DASHBOARD_HARVESTED_BLOCKS_TH' | translate }}</th>
                </tr>
              </thead>
            </table>
            <table ng-show="$ctrl._DataBridge.harvestedBlocks.length" class="table table-condensed">
              <tbody>
                <tr ng-repeat="block in $ctrl._DataBridge.harvestedBlocks | startFrom:$ctrl.currentPageHb*$ctrl.pageSizeHb | limitTo:$ctrl.pageSizeHb">
                  <td>{{block.height}}</td>
                  <td>{{block.totalFee/1000000}}</td>
                </tr>
              </tbody>
            </table>
            <div class="arrows harvested">
              <div ng-show="$ctrl._DataBridge.harvestedBlocks.length > 5">
                <button class="buttonStyle" ng-disabled="$ctrl.currentPageHb == 0" ng-click="$ctrl.currentPageHb = $ctrl.currentPageHb-1">
                  <span class="fa fa-chevron-left" aria-hidden="true"></span>
                </button>
                <b>{{$ctrl.currentPageHb+1}}/{{$ctrl.numberOfPagesHb()}}</b>
                <button class="buttonStyle" ng-disabled="$ctrl.currentPageHb+1 >= $ctrl.numberOfPagesHb()" ng-click="$ctrl.currentPageHb = $ctrl.currentPageHb+1">
                  <span class="fa fa-chevron-right" aria-hidden="true"></span>
                </button>
              </div>
            </div>
            <div class="panel-body nothing" ng-show="!$ctrl._DataBridge.harvestedBlocks.length">
              <p>{{ 'GENERAL_NO_RESULTS' | translate }}</p>
            </div>
          </div>
        </div>
      </div>
      <!-- UPDATES SECTION -->
      <div class="col-lg-3 col-lg-offset-1 col-md-3 col-md-offset-0 col-sm-12 col-sm-offset-0 updates">
        <div>
          <h1>{{ 'DASHBOARD_NOTICE_1' | translate }}</h1>
          <h5 ng-bind-html="'DASHBOARD_NOTICE_2' | translate"></h5>
          <p>
          <span ng-bind-html="'DASHBOARD_NOTICE_3' | translate"></span>
          <br><br>
          {{ 'DASHBOARD_NOTICE_4' | translate }}
          <br><br>
          {{ 'DASHBOARD_NOTICE_5' | translate }}
          </p>
        </div>
        <!-- MARKET INFO WIDGET -->
        <div class="market-info" ng-show="$ctrl._DataBridge.marketInfo.highestBid && $ctrl._DataBridge.btcPrice.last">
          <h4> {{ 'DASHBOARD_MARKET_INFO_TITLE' | translate }} <i class="fa fa-refresh" style="cursor:pointer;float:right;" ng-click="$ctrl.refreshMarketInfo();"></i></h4>
        <div class="row">
          <div class="col-md-6 col-sm-3 header">
            {{ 'DASHBOARD_MARKET_INFO_CAP' | translate }}:
            <br>
            <span><i class="fa fa-usd"></i> {{($ctrl._DataBridge.marketInfo.highestBid * 8999999999) * $ctrl._DataBridge.btcPrice.last | currencyFormat}}</span>
          </div>
          <div class="col-md-6 col-sm-3 header">
            {{ 'DASHBOARD_MARKET_INFO_VOLUME' | translate }}:
            <br>
            <span><i class="fa fa-usd"></i> {{$ctrl._DataBridge.marketInfo.baseVolume * $ctrl._DataBridge.btcPrice.last | currencyFormat}}</span>
          </div>
          <div class="col-md-6 col-sm-3 header ticker">
            {{ 'DASHBOARD_MARKET_INFO_PRICE' | translate }} in USD:
            <br>
            <span><i class="fa fa-usd"></i> {{$ctrl.toFixed4($ctrl._DataBridge.marketInfo.highestBid * $ctrl._DataBridge.btcPrice.last)}}</span>
          </div>
          <div class="col-md-6 col-sm-3 ticker header">
            {{ 'DASHBOARD_MARKET_INFO_PRICE' | translate }} in Bitcoin:
            <br>
            <span><i class="fa fa-bitcoin"></i> {{$ctrl._DataBridge.marketInfo.highestBid}}</span>
          </div>
          <div class="col-md-6 col-sm-3 ticker header">
            {{ 'DASHBOARD_MARKET_INFO_CHANGES' | translate }}:
            <br>
             <span ng-style="$ctrl._DataBridge.marketInfo.percentChange * 100 < 0 ? { 'color': 'red'} : { 'color': 'green'}">
              <span class="fa fa-caret-up" ng-show="$ctrl._DataBridge.marketInfo.percentChange * 100 > 0" style="color:green;"></span>
              <span class="fa fa-caret-down" ng-show="$ctrl._DataBridge.marketInfo.percentChange * 100 < 0" style="color:red;"></span>
              {{$ctrl._DataBridge.marketInfo.percentChange * 100 | currencyFormat}} %
            </span>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>
</div>
